<template>
	<view>
		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="1000">
			<view class="title-box">
				<text>选择车辆</text>
			</view>
		</z-nav-bar>
		<u-sticky :offsetTop="offsetTop">
			<view class="searchBox">
				<view class="search">
					<u--input v-model="keyword" clearable border="none" fontSize="12" placeholder="输入车牌号查询"
						@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399" />
				</view>
			</view>
		</u-sticky>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="customerItem" v-for="(item,index) in list" :key="item.carId">
				<view class="text-line">
					<text class="text-name">品牌/车系/车型:</text>
					<text class="text-value">{{item.carInfo}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">车牌号:</text>
					<text class="text-value">{{item.carNo}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">车架号:</text>
					<text class="text-value">{{item.vinNo}}</text>
				</view>
				<view class="btn-detail" @click.stop="chooseCar(item)">
					立即选择
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import * as illegalApi from '@/api/illegal-api.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				offsetTop: 0,
				isSearch: false,
				list: [],
				keyword : ''

			};
		},
		onLoad(option) {
			//获取手机状态栏高度
			this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750 * uni.getSystemInfoSync()
				.windowWidth) - 0.5;

		},
		methods: {
			upCallback(page) {
				var params = {
					pageNum: page.num,
					pageSize: page.size,
					carNo : this.keyword
				};
				illegalApi.carList(
                    this.toParams(
                        params
                    )
                ).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//搜索
			searchChange(value) {
                uni.$u.debounce(()=>{
                    this.mescroll.triggerDownScroll();
                }, 1000)
			},
			// 选择车辆
			chooseCar(item) {
				uni.$emit('illegalCarList', item);
				uni.navigateBack()
			},


		}
	};
</script>

<style lang="scss" scoped>
	.searchBox {
		padding: 20upx;
		display: flex;
		align-items: center;
		// background-color: #fff;
		background: linear-gradient(90deg, #3599FF 0%, #0275ED 100%);

		.city {
			font-size: 28rpx;
			color: #fff;
			margin-right: 8rpx;
		}

		.search {
			flex: 1;
			padding: 0 20upx;
			margin: 0 20upx;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24upx;
			background-color: #ffffff;
			border-radius: 30rpx;
		}
	}


	.customerItem {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 24rpx;
		color: #666;
		font-size: 28rpx;
		position: relative;
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		position: absolute;
		right: 24rpx;
		bottom: 32rpx;
	}
</style>
